<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
  进销管理
</blockquote>
<div class="layui-card layui-panel">
  <div class="layui-card-header">
    采购退货
  </div>
  <div class="layui-card-body">
    <form  action="http://localhost:8080/jxc01/obscureReturn" method="post">
               <span>
               <input type="text" name="procurement" placeholder="采购单号" style="width: 120px;height: 28px" >
               <button class="layui-btn" type="submit">查找</button></span>
<!--      <button class="layui-btn"><a href="">添加</a></button>-->
      <button type="button" class="layui-btn layui-btn-primary" lay-on="page">添加</button>
    </form>
    <table class="layui-hide" id="ID-table-demo-data" lay-filter="test"></table>
  </div>
</div>
<!--选定条目，编辑已有数据-->
<form id="editForm" method="post" action="" hidden = "hidden">
  用户名:<input type="text" name=""  id="edit_username" placeholder="请设置系统登录用户名" value=""/><br/>
  真实姓名:<input type="text" name="" id="edit_realname" placeholder="请输入真实姓名" value=""/><br/>
  密码:<input type="text" name="" id="edit_password" placeholder="请输入登录密码" value=""/><br/>
  性别:<select style="width: 100px " id="edit_sex" onchange="" name="sex">
  <option value="1">[1]男</option>
  <option value="0">[0]女</option>
</select><br/>
  邮箱:<input type="text" name="" id="edit_email" placeholder="邮箱格式 xxx@qq.com" value=""/><br/>
  电话:<input type="text" name="" id="edit_phone" placeholder="供应商电话" value=""/><br/>
  状态:<select style="width: 100px " id="edit_status" onchange="" name="status">
  <option value="0">[0]禁用</option>
  <option value="1">[1]正常</option>
</select><br/>
  描述信息:<input type="text" name="authority" id="edit_authority" placeholder="权限" value=""/><br/>
  <input type="button" value="取消" style="float: right">
  <input type="submit" value="确认" style="float: right">
</form>
</body>
<script src="layui/layui.js"></script>
<script src="js/jquery-3.7.0.js"></script>
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  layui.use(function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;
    util.on('lay-on', {
      page: function(){
        // 页面层
        layer.open({
          type: 1,
          btn:['确定','取消'],
          area: ['420px', '240px'], // 宽高
          content: '<div style="padding: 11px;"><form action="http://localhost:8080/jxc01/addreturn" method="post">\n' +
                  '        采购编号:<input type="text" name="procurement" placeholder="采购编号" value=""/><br/>\n' +
                  '        退购编号:<input type="text" name="chargebacks" placeholder="退货编号" value=""/><br/>\n' +
                  '        退购数量:<input type="text" name="quantity" placeholder="退货数量" value=""/><br/>\n' +
                  '        退购单价:<input type="text" name="unit_price" placeholder="退购单价" value=""/><br/>\n' +
                  '        退购总价:<input type="text" name="price" placeholder="退购总价" value=""/><br/>\n' +
                  '        状态:<select style="width: 100px " id="select" onchange="" name="states">\n' +
                  '                <option value="0">[0]完成</option>\n' +
                  '                <option value="1">[1]进行中</option>\n' +
                  '              </select><br/>\n' +
                  '        退购时间:<input type="textarea" name="return_time" placeholder="退购时间" value=""/><br/>\n' +
                  '        退购原因:<input type="textarea" name="cause" placeholder="退购原因" value=""/><br/>\n' +
                  '        <input type="submit" value="确认" style="float: right">\n' +
                  '</form></div>'
        })
      }
    });
    // 提交事件
    form.on('submit(demo-submit)', function(data){
      var field = data.field; // 获取表单全部字段值
      var elem = data.elem; // 获取当前触发事件的元素 DOM 对象，一般为 button 标签
      var elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
      // 显示填写结果，仅作演示用
      layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
      });
      // 此处可执行 Ajax 等操作
      return false; // 阻止默认 form 跳转
    });
  });
  layui.use('table', function(){
    var table = layui.table;
    // 已知数据渲染
    var inst = table.render({
      elem: '#ID-table-demo-data',
      url:'http://localhost:8080/jxc01/queryReturn',
      cols: [[ //标题栏
        {field: 'id', title: 'ID', width: 80, sort: true},
        {field: 'procurement', title: '采购编号', minWidth: 140},
        {field: 'chargebacks', title: '退货编号', minWidth: 140},
        {field: 'quantity', title: '退购数量', width: 100},
        {field: 'unit_price', title: '退购单价', width: 100},
        {field: 'price', title: '退购总价', minWidth: 100},
        {field: 'state', title: '状态', width: 120},
        {field: 'return_time', title: '退货时间', width: 180, sort: true},
        {field: 'cause', title: '退购原因', width: 150},
      ]],
      // data: [{ // 赋值已知数据
      //   "id": "10001",
      //   "goodsName": "张三1",
      //   "sex": "男",
      //   "class": "浙江杭州",
      //   "updateTime": "人生恰似一场修行",
      //   "experience": "116"
      // }],
      //skin: 'line', // 表格风格
      //even: true,
      page: true, // 是否显示分页
      limits: [5, 10, 15],
      limit: 5 // 每页默认显示的数量
    });
  });

</script>
</html>